@import "../components/style/var.scss";
@import "../components/style/function";
@import "../components/style/mixin/color.scss";
.code {
  font-family: Menlo, Monaco, Consolas, Courier, monospace;
  -webkit-font-smoothing: auto;
  background-color: #fafafa;
}
.codename {
  color: #3182bd;
}
.codetitle {
  color: #3182bd;
}
.codetext {
  padding: 0 20px;
  font-weight: 500;
  font-size: 20px;
}
.styletitle {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-left: 50px;
  background-color: #fafafa;
  justify-content:flex-start;
  .styletext {
    font-size: 25px;
    margin-right: 50px;
    width: 150px;
  }
  .styleinfo {
    width: 160px;
    height: 60px;
    margin: 8px 0px;
    @include bgc("info");
    border-radius: 4px;
  }
  .styleprimary {
    width: 160px;
    height: 60px;
    margin: 8px 0px;
    @include bgc("primary");
    border-radius: 4px;
  }
  .stylesuccess {
    width: 160px;
    height: 60px;
    margin: 8px 0px;
    @include bgc("success");
    border-radius: 4px;
  }
  .stylewarning {
    width: 160px;
    height: 60px;
    margin: 8px 0px;
    @include bgc("warning");
    border-radius: 4px;
  }
  .styledanger {
    width: 160px;
    height: 60px;
    margin: 8px 0px;
    @include bgc("danger");
    border-radius: 4px;
  }
  .styleround {
    width: 160px;
    height: 60px;
    margin: 8px 0px;
    @include bgc("round");
    border-radius: 4px;
  }
  .styledark {
    width: 160px;
    height: 60px;
    margin: 8px 0px;
    @include bgc("dark");
    border-radius: 4px;
  }
  .stylewhile {
    width: 160px;
    height: 60px;
    margin: 8px 0px;
    @include bgc("while");
    border-radius: 4px;
  }

}
